import { API, BASE_PATH } from "@/config"
import requewt from "@/utils/requewt"
import { Form, ImageUploader, Input } from "antd-mobile"
import { forwardRef, useEffect, useImperativeHandle, useState } from "react"

export default forwardRef((props,ref) => {
    const [form] = Form.useForm()
    const [fileList,setFileList] = useState([])
    const [initValue, setInitValue] = useState({})
    useEffect(() => {
        requewt(API.user.userPostInfo).then(({data}) => {
            // console.log(data,'data')
            const {address = '',image_url = '',name = '',platform = '' } = data || {}
            setInitValue({address,image_url,name,platform})
            form.setFieldsValue({
                address,image_url,name,platform
            })
            if (image_url) {
                setFileList([
                    {
                        url: image_url
                    }
                ])
            }
        })
    },[])
    useImperativeHandle(ref,() => ({
        getFormValue() {
            const values = form.getFieldsValue()
            const result = {}
            Object.keys(values).forEach(key => {
                result[key] = values[key] || ''
            })
            return result
        },
        validateFields() {
            return new Promise((resolve,reject) => {
                const file = form.getFieldValue('file')
                // if (initValue.image_url)
            })
        }
    }))
    useEffect(() => {
        // form.setFieldsValue({
        //     // file: []
        // })
    },[])
    return (
        <Form layout="horizontal" className="info-form" form={form} >
            <Form.Item label="用户昵称" name="name">
                <Input />
            </Form.Item>
            <Form.Item label="发布链接" name="address">
                <Input />
            </Form.Item>
            <Form.Item label="发布平台" name="platform">
                <Input />
            </Form.Item>
            <Form.Item name="file">
            <span>个人主页（截图）</span>
                <Input type="hidden" />
            </Form.Item>
            <Form.Item name="image_url" hidden>
                <Input 
                    type="hidden"
                />
            </Form.Item>
            <ImageUploader
                    maxCount={1}
                    style={{paddingLeft:16}}
                    onDelete={() => {
                        form.setFieldsValue({
                            file: '',
                            image_url: ''
                        })
                        // setFileList([])
                    }}
                    value={fileList}
                    onChange={(value) => {
                        setFileList(value)
                    }}
                    upload={ async (file) => {
                        // console.log(file)
                        form.setFieldValue('file', file)
                        return {
                            url: URL.createObjectURL(file)
                        }
                    }}
                    imageFit="cover"
                >
                    <div style={{backgroundColor:'#dddddd',padding:10,textAlign:'center',borderRadius:8}}>
                        <img 
                            width="40"
                            src={`${BASE_PATH}/img/game/uploader-icon.png`}
                        />
                        <div style={{fontSize:12}}>
                            点击上传
                        </div>
                    </div>
                </ImageUploader>
        </Form>
    )
})